<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="destroy"
      :modal-append-to-body="false"
      :title="title"
      :top="top"
      :visible="visible"
      :width="width"
      @close="onClose"
    >
      <!-- :style="{ height: height + 'px' }" -->
      <div class="container">
        <slot name="content" />
      </div>
      <span v-if="showfoot" slot="footer" class="dialog-footer">
        <el-button v-if="showfoot" @click="handleClose">取 消</el-button>
        <el-button v-if="showfoot" type="primary" @click="handleConfirm">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    top: {
      type: String,
      default: '15vh'
    },
    visible: {
      type: Boolean,
      default: false
    },
    destroy: {
      type: Boolean,
      default: true
    },
    showfoot: {
      type: Boolean,
      default: true
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '500px'
    },
    // height: {
    //   type: Number,
    //   default: 250
    // }
  },
  mounted() {},
  methods: {
    // 确定新增/修改
    handleConfirm() {
      this.$emit('handleConfirm')
    },
    // 取消
    handleClose() {
      this.$emit('handleCloseDialog')
    },
    onClose() {
      this.$emit('handleCloseDialog')
    }
  }
}
</script>

<style lang="scss">
  .container {
    overflow-x: initial;
    overflow-y: auto;
  }
  .el-dialog {
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    .el-dialog__header {
      margin-right: 0;
      background-color: #1890ff !important;
      border-top-left-radius: 7px !important;
      border-top-right-radius: 7px !important;
      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
      }
      .el-dialog__close {
        color: #fff !important;
      }
    }
    .el-dialog__body {
      padding: 30px 10px;
    }
    .el-dialog__footer {
      padding: 10px;
      border-top: 1px solid #e8eaec !important;
    }
    .el-icon svg {
      color: #fff;
    }
  }
</style>
